<template>
  <div>
    <div class="container" :style='{
      "minHeight": "100vh",
      "backgroundAttachment": "fixed",
      "alignItems": "center",
      "background": "url(/assets/img/bg.jpg)",
      "display": "flex",
      "width": "100%",
      "backgroundSize": "cover",
      "backgroundPosition": "center center",
      "backgroundRepeat": "no-repeat",
      "justifyContent": "center"
    }'>
      <el-form :style='{
        "padding": "40px 20px 80px",
        "boxShadow": "0px 4px 10px 0px #78ABC3",
        "margin": "0",
        "outline": "4px solid #78ABC3",
        "borderRadius": "0",
        "outlineOffset": "30px",
        "background": "#fff",
        "width": "500px",
        "height": "auto"
      }'>
        <div :style='{
          "margin": "0 0 10px 0",
          "color": "#000",
          "textAlign": "center",
          "width": "100%",
          "lineHeight": "60px",
          "fontSize": "26px",
          "textShadow": "4px 4px 2px rgba(120, 171, 195, 0.3)",
          "fontWeight": "bold"
        }' class="title-container">高校宿舍管理系统登录</div>

        <div class="list-item" :style='{
          "width": "80%",
          "margin": "0 auto 20px",
          "alignItems": "center",
          "flexWrap": "wrap",
          "display": "flex"
        }'>
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
            :style='{
              "border": "0px solid rgba(64, 158, 255, 1)",
              "padding": "0 10px",
              "boxShadow": "0px 4px 10px 0px rgba(0,0,0,0.3020)",
              "color": "#758659",
              "width": "100%",
              "fontSize": "14px",
              "height": "44px"
            }'
          />
        </div>
        
        <div class="list-item" :style='{
          "width": "80%",
          "margin": "0 auto 20px",
          "alignItems": "center",
          "flexWrap": "wrap",
          "display": "flex"
        }'>
          <el-input 
            v-model="loginForm.password" 
            placeholder="请输入密码"
            type="password"
            :style='{
              "border": "0px solid rgba(64, 158, 255, 1)",
              "padding": "0 10px",
              "boxShadow": "0px 4px 10px 0px rgba(0,0,0,0.3020)",
              "color": "#758659",
              "width": "100%",
              "fontSize": "14px",
              "height": "44px"
            }'
          />
        </div>
        
        <div :style='{"width":"80%","margin":"20px auto", "display":"flex", "justifyContent":"center"}' v-if="roles.length>1" class="list-type">
          <el-radio-group v-model="loginForm.role">
            <el-radio v-for="item in roles" :key="item.roleName" :label="item.roleName">{{item.roleName}}</el-radio>
          </el-radio-group>
        </div>
        
        <div :style='{
          "width": "80%",
          "margin": "20px auto",
          "alignItems": "center",
          "flexWrap": "wrap",
          "justifyContent": "center",
          "display": "flex"
        }'>
          <el-button :style='{
            "border": "0",
            "cursor": "pointer",
            "padding": "0 24px",
            "margin": "0",
            "outline": "none",
            "color": "#fff",
            "borderRadius": "0",
            "background": "#78ABC3",
            "width": "100%",
            "fontSize": "18px",
            "height": "60px"
          }' type="primary" @click="login()" class="loginInBt">登录</el-button>
          
          <div style="width: 100%; display: flex; justify-content: center; margin-top: 20px;">
            <el-button :style='{
              "border": "0px solid rgba(64, 158, 255, 1)",
              "cursor": "pointer",
              "padding": "0 24px",
              "margin": "10px",
              "outline": "none",
              "color": "#969696",
              "borderRadius": "4px",
              "background": "#fff",
              "width": "auto",
              "fontSize": "14px",
              "height": "44px"
            }' @click="register('suguan')" class="register">注册宿管</el-button>
            
            <el-button :style='{
              "border": "0px solid rgba(64, 158, 255, 1)",
              "cursor": "pointer",
              "padding": "0 24px",
              "margin": "10px",
              "outline": "none",
              "color": "#969696",
              "borderRadius": "4px",
              "background": "#fff",
              "width": "auto",
              "fontSize": "14px",
              "height": "44px"
            }' @click="register('xuesheng')" class="register">注册学生</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userAPI } from '@/utils/api'

const router = useRouter()

const loginForm = ref({
  username: '',
  password: '',
  role: ''
})

const roles = ref([
// { roleName: '管理员', tableName: 'users' },  //------管理员不用了
  { roleName: '宿管', tableName: 'suguan' },
  { roleName: '学生', tableName: 'xuesheng' }
])

const selectedTable = ref('')

// 注册
const register = (tableName) => {
  localStorage.setItem('loginTable', tableName)
  localStorage.setItem('pageFlag', 'register')
  router.push('/register')
}

// 登录
const login = () => {
  if (!loginForm.value.username) {
    ElMessage.error('请输入用户名')
    return
  }
  if (!loginForm.value.password) {
    ElMessage.error('请输入密码')
    return
  }

  let tableName = ''
  
  if (roles.value.length > 1) {
    if (!loginForm.value.role) {
      ElMessage.error('请选择角色')
      return
    }
    
    for (let i = 0; i < roles.value.length; i++) {
      if (roles.value[i].roleName === loginForm.value.role) {
        tableName = roles.value[i].tableName
      }
    }
  } else {
    tableName = roles.value[0].tableName
    loginForm.value.role = roles.value[0].roleName
  }
  
  selectedTable.value = tableName
  
  userAPI.login(tableName, loginForm.value.username, loginForm.value.password)
    .then((data) => {
      if (data && data.code === 0) {
        
        
        localStorage.setItem('Token', data.token)
        localStorage.setItem('role', loginForm.value.role)
        localStorage.setItem('sessionTable', tableName)
        localStorage.setItem('adminName', loginForm.value.username)

        userAPI.getSession(tableName).then((data1) => { localStorage.setItem('loudong', data1.data.loudong)}).catch(error => {alert("获取楼栋失败")    })
       

    
        router.replace('/index')
      } else {
        ElMessage.error(data.msg)
      }
    })
    .catch(error => {
      console.error(error)
      ElMessage.error('登录失败，请检查网络连接')
    })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style> 